<template>
	<div class="factory_sidebar">
		<!-- 修改工厂信息的对话框 -->
		<el-dialog title="修改工厂信息" :visible.sync="visable" width="40%" @before-close="handleUpdateClose" append-to-body>
			<el-form :model="changeFactory" label-width="80px">
				<el-form-item label="工厂名">
					<el-input v-model="changeFactory.name"></el-input>
				</el-form-item>
				<el-form-item label="工厂图标">
					<icon-select :type="changeFactory.iconType" :url="changeFactory.iconUrl"
						@change="handleUpdateIcon"></icon-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleUpdateClose">取 消</el-button>
				<el-button type="primary" @click="handleUpdateSave">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 工厂列表菜单 -->
		<el-menu default-active="1" class="factory_menu" :collapse="isCollapse">
			<el-menu-item v-for="(factory, index) of factoryList" :key="index" :index="factory.id"
				@click="openFactory(factory)">
				<span slot="title" class="title">
					<my-image :type="factory.iconType" :icon="factory.iconUrl" :size="32" class="my-image"></my-image>
					<div class="factory_name">{{ factory.name }}</div>
					<div class="btn_container">
						<el-button class="btn update_btn" size="mini" icon="el-icon-edit"
							@click.stop="updateFactoty(factory)"></el-button>
						<el-button class="btn copy_btn" size="mini" icon="el-icon-copy-document"
							@click.stop="copyFactoty(factory)"></el-button>
						<el-button class="btn delete_btn" size="mini" icon="el-icon-close"
							@click.stop="deleteFactory(factory)"></el-button>
					</div>
				</span>
			</el-menu-item>
			<el-menu-item index="add" @click="createFactory">
				<i class="el-icon-plus"></i>
				<span slot="title">添加工厂</span>
			</el-menu-item>
		</el-menu>
	</div>
</template>

<script lang="ts">
	import Vue from 'vue';
	import MyImage from '@/components/Image.vue';
	import IconSelect from "@/components/calculation/IconSelect.vue";
	import { mapState, mapActions } from 'vuex';
	import { FactoryInfo } from '@/assets/ts/class/factoryInfo';
	import * as method from '@/assets/ts/factoryMethod';
	import { factory } from 'typescript';

	export default Vue.extend({
		components: { MyImage, IconSelect },
		data() {
			return {
				factoryList: [] as FactoryInfo[], // 工厂列表
				visable: false, // 修改工厂信息对话框的显示状态
				changeFactory: new FactoryInfo('', '', ''), // 当前正在修改的工厂信息
				isCollapse: false, // 菜单是否折叠
			};
		},
		computed: {
			...mapState(['factory']),
		},
		methods: {
			...mapActions([
				'setFactoryAsync',
			]),
			handleUpdateClose() {
				this.changeFactory = new FactoryInfo('', '', '');
				this.visable = false;
			},
			handleUpdateSave() {
				method.saveFactoryInfo(this.changeFactory); // 调用 factoryMethod 的 updateFactory action
				this.visable = false;
				this.loadFactoryList();
			},
			updateFactoty(info : FactoryInfo) {
				this.changeFactory = new FactoryInfo(info.name, info.iconType, info.iconUrl); // 设置当前修改的工厂信息
				this.changeFactory.id = info.id;// 最重要的设置id
				this.visable = true; // 显示对话框
			},

			handleUpdateIcon(type : string, url : string) {
				// console.log("参数：", type, url);
				this.changeFactory.iconType = type;
				this.changeFactory.iconUrl = url;
			},

			createFactory() {
				const factory = method.createFactory(); // 调用本地方法创建工厂
				this.setFactoryAsync(factory);
				this.loadFactoryList();
			},
			// 打开某个工厂
			openFactory(info : FactoryInfo) {
				const factory = method.openFactory(info.id); // 调用本地方法加载工厂信息
				this.setFactoryAsync(factory);
			},
			copyFactoty(info : FactoryInfo) {
				const factory = method.copyFactory(info.id); // 调用本地方法复制工厂
				this.setFactoryAsync(factory);
				this.loadFactoryList();
			},
			deleteFactory(info : FactoryInfo) {
				method.removeFactory(info.id);
				if (this.factory.id == info.id) this.setFactoryAsync(null);
				this.$nextTick(() => { // 以防更新失败
					this.loadFactoryList();
				})
			},
			loadFactoryList() {
				this.factoryList = method.loadFactorys(); // 使用导入的 method.loadFactorys
			},
		},
		mounted() {
			this.loadFactoryList(); // 在组件挂载时加载工厂列表
			this.$version.addListener('calculation', () => {
				this.loadFactoryList(); // 监听版本更新事件，重新加载工厂列表
				this.setFactoryAsync(null);
			});
		},
		destroyed() {
			this.$version.removeListener('calculation'); // 移除版本更新事件监听
		},
	});
</script>
<style lang="less" scoped>
	@import "@/assets/less/variables.less";

	// 混合：按钮基础样式
	.btn-mixin(@color) {
		color: @color;
		border-color: fade(@color, 30%);
		background: fade(@color, 10%);

		&:hover {
			background: fade(@color, 20%);
		}
	}

	.factory_sidebar {
		width: 100%;
		display: flex;

		.factory_icon {
			display: flex;
			justify-content: space-around;
			align-items: center;

			div {
				width: 300px;
			}
		}

		.factory_menu {
			background: @color-white;
			border-right: none;
			transition: width 0.3s ease;

			&:not(.el-menu--collapse) {
				width: 100%;
				height: calc(100vh - 60px);
				overflow-y: auto;
				overflow-x: clip;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding-right: 16px;
					color: @color-text;
					position: relative;

					.factory_name {
						width: 80%;
					}

					.my-image {
						margin-right: 16px;
						flex-shrink: 0;
					}

					.btn_container {
						display: flex;
						gap: 12px;
						opacity: 0;
						transform: translateX(10px);
						transition: all 0.3s ease 0.1s;
						position: absolute;
						left: 100px;
						top: 40px;
						z-index: 4;

						.btn {
							width: 40px;
							height: 40px;
							padding: 8px;
							border: 2px solid transparent;
							border-radius: 8px;
							transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
							background: @color-white;
							box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

							&.update_btn {
								.btn-mixin(@color-success);
							}

							&.copy_btn {
								.btn-mixin(@color-warning);
							}

							&.delete_btn {
								.btn-mixin(@color-danger);
							}

							.el-icon {
								font-size: 16px;
							}
						}
					}
				}
			}

			.el-menu-item {
				height: 64px;
				padding: 0 24px !important;
				border-bottom: 1px solid @color-border;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				position: relative;

				&:hover {
					background: rgba(@color-primary, 0.05) !important;

					.title div {
						opacity: 1;
						transform: translateX(0);
					}

					// 悬停热区扩展
					&::after {
						content: '';
						position: absolute;
						top: -8px;
						bottom: -8px;
						left: -8px;
						right: -80px;
						z-index: 1;
					}
				}

				&.is-active {
					background: rgba(@color-primary, 0.08) !important;
					border-left: 3px solid @color-primary;

					.btn {
						background: fade(@color-primary, 10%) !important;
						box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

						&.update_btn {
							color: @color-success !important;
							border-color: fade(@color-success, 30%) !important;
							background: fade(@color-success, 10%) !important;
						}

						&.copy_btn {
							color: @color-warning !important;
							border-color: fade(@color-warning, 30%) !important;
							background: fade(@color-warning, 10%) !important;
						}

						&.delete_btn {
							color: @color-danger !important;
							border-color: fade(@color-danger, 30%) !important;
							background: fade(@color-danger, 10%) !important;
						}

						&:hover {
							transform: scale(1.05);

							&.update_btn {
								background: fade(@color-success, 20%) !important;
							}

							&.copy_btn {
								background: fade(@color-warning, 20%) !important;
							}

							&.delete_btn {
								background: fade(@color-danger, 20%) !important;
							}
						}
					}
				}
			}

			#add {
				border-top: 1px solid @color-border;

				.el-icon-plus {
					color: @color-primary;
					font-size: 18px;
				}
			}
		}

		// 对话框样式
		.el-dialog {
			border-radius: 12px;
			box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1) !important;

			&__header {
				border-bottom: 1px solid @color-border;
				padding: 24px;
			}

			&__body {
				padding: 24px;

				.el-form-item {
					margin-bottom: 20px;

					&__label {
						color: @color-subtext;
						padding-right: 16px;
					}

					.el-input__inner {
						border-color: @color-border;
						transition: border-color 0.3s ease;

						&:focus {
							border-color: @color-primary;
							box-shadow: 0 0 0 2px fade(@color-primary, 10%);
						}
					}
				}
			}

			&__footer {
				border-top: 1px solid @color-border;
				padding: 16px 24px;

				.el-button {
					min-width: 80px;

					&--primary {
						background: @color-primary;
						border-color: @color-primary;
						transition: all 0.3s ease;

						&:hover {
							background: darken(@color-primary, 8%);
							transform: translateY(-1px);
						}
					}
				}
			}
		}
	}

	// 移动端适配
	@media (max-width: 768px) {
		.factory_sidebar {
			.factory_menu {
				.el-menu-item {
					height: 56px;
					padding: 0 16px !important;

					.title {
						font-size: 14px;

						div .btn {
							width: 36px;
							height: 36px;
							padding: 6px;
						}
					}
				}
			}

			.el-dialog {
				width: 90% !important;

				&__body {
					padding: 16px;
				}
			}
		}
	}
</style>